<template>
	<div class="Polygon">
		<div style="width: 100%; height: 100%;">
			<div v-if="edit" style="margin-bottom: 5px;">
				<el-input v-model="searchKeyword" placeholder="搜索地点" id="tipinput" size="mini"
					style="width: 200px;margin-right: 10px;"></el-input>
				<!-- <el-button type="primary" size="mini" @click="polyEditor.open()">开始编辑</el-button> -->
				<el-button type="primary" size="mini" @click="polyEditorOpen">开始编辑</el-button>
				<el-button type="primary" size="mini" @click="polyEditorClose">结束编辑</el-button>
				<el-button type="primary" size="mini" @click="clearPath">清除</el-button>
			</div>
			<MapContainer ref="MapContainer"></MapContainer>
		</div>
	</div>
</template>

<script>
import MapContainer from "./MapContainer.vue"
export default {
	/**
	 * edit: 是否启用编辑器，默认为false
	 * coordinate: 可选，传入的坐标数组
	 * @change: newCoordinate为改变后的坐标数组
	 */
	components: {
		MapContainer
	},
	data() {
		return {
			AMap: void 0,
			map: void 0, // 地图实例
			polygon: void 0, // 多边形实例
			polyEditor: void 0, // 编辑工具
			auto: void 0, // 搜索框
			placeSearch: void 0, // 搜索
			path: this.coordinate, // 坐标数组
			searchKeyword: void 0, // 关键字
			marker: new Array(), // 标记点实例
			point: this.markPoint // 标记点
		}
	},
	mounted() {
		this.initAMap();
	},
	methods: {
		initAMap() {
			if (!this.$AMap) {
				setTimeout(() => {
					this.initAMap();
				}, 100);
			} else {
				this.AMap = this.$AMap;
				this.map = this.$refs.MapContainer.map;
				//this.map.setCenter([115.872204, 28.700762])

				// 有坐标数组则初始化
				if (this.path !== null && this.path.length > 0) {
					// 加载多边形
					this.loadPolygon();
					// 创建一个编辑工具
					this.polyEditor = new this.AMap.PolyEditor(this.map, this.polygon)
					// 监听编辑结束事件
					this.polyEditorEnd();
				}

				// 搜索
				this.auto = new this.AMap.AutoComplete({
					input: 'tipinput'
				});
				this.placeSearch = new this.AMap.PlaceSearch({
					map: this.map,
				})
				// 当选中某条搜索记录时触发
				this.selectSite();

				// 标记点
				if (this.point !== null && this.point.length > 0) {
					this.loadMarker();
				}
			}
		},
		loadPolygon() {
			this.polygon = new this.AMap.Polygon({
				path: this.path, // 多边形轮廓数组
				strokeColor: "#FF33FF", // 轮廓线颜色
				strokeWeight: 6, // 轮廓线宽度
				strokeOpacity: 0.2, // 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9
				fillOpacity: 0.4, // 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
				fillColor: '#1791fc', // 多边形填充颜色
				zIndex: 50, //多边形覆盖物的叠加顺序。
			})
			// 将矢量图形对象添加进地图对象中
			this.map.add(this.polygon)
			// 缩放地图到合适的视野级别
			this.map.setFitView([this.polygon])
			//console.log("polygon==>", this.polygon)
		},
		polyEditorEnd() {
			// 监听 PolyEditor 的 end 事件
			this.AMap.Event.addListener(this.polyEditor, 'end', (event) => {
				// 在编辑结束时执行的操作
				// 获取编辑后的多边形路径数组
				//console.log("event=>", event)
				if (event.target !== null) {
					this.polygon = event.target;
					const path = this.polygon.getPath();
					// 将路径数组转换为经纬度数组
					this.path = path.map(point => [point.getLng(), point.getLat()]);
					// 打印多边形的经纬度数组
					//console.log("多边形数组==>", this.path);
					this.$emit("change", this.path)
				}
			});
		},
		// 开始编辑
		polyEditorOpen() {
			if (this.path !== null && this.path.length > 0) {
				this.polyEditor.open();
			} else {
				// 获取当前地图中心点
				const center = this.map.getCenter();
				//console.log("地图中心点=>",center)
				const lng = center.lng
				const lat = center.lat
				//console.log("经纬度=>", lng, lat)
				this.path = [
					[lng, lat],
					[lng, lat - 0.001],
					[lng - 0.001, lat - 0.001]
				]
				// 加载多边形
				this.loadPolygon();

				// 创建一个编辑工具
				this.polyEditor = new this.AMap.PolyEditor(this.map, this.polygon)
				this.polyEditorEnd();
				this.polyEditor.open();
			}
		},
		// 结束编辑
		polyEditorClose() {
			if (this.polyEditor != null) {
				this.polyEditor.close();
			}
		},
		// 监听选中
		selectSite() {
			this.AMap.Event.addListener(this.auto, 'select', (event) => {
				//console.log("event==>", event)
				if (event.poi) {
					this.placeSearch.search(event.poi.name, (status, result) => {
						// console.log("status=>", status);
						// console.log("result=>", result);
						// if (status === 'complete' && result.info === 'OK') {
						// 	// 在这里处理搜索结果
						// 	const poiList = result.poiList.pois;
						// 	// 获取第一个POI的经纬度
						// 	const location = poiList[0].location;
						// 	console.log("location==>",location);
						// } else {
						// 	// 搜索失败或没有结果时的处理
						// 	console.log('搜索失败');
						// }
					})
				}
			})
		},
		// 清除多边形
		clearPath() {
			if (this.polygon != null) {
				this.polyEditor.close();
				this.map.remove(this.polygon);
				this.path = new Array();
				this.polygon = null;
				this.polyEditor = null;
			}
			//this.$message.success("清除成功")
		},
		// 加载标记点
		loadMarker() {
			if (this.point !== null && this.point.length > 0) {
				if (this.point.length == 2 && !Array.isArray(this.point[0]) && !Array.isArray(this.point[1])) {
					this.marker.push(
						new this.AMap.Marker({
							position: new this.AMap.LngLat(this.point[0], this.point[1]),
						})
					)
					this.marker.map(item => {
						this.map.add(item);
						this.map.setFitView(item);
					})
				} else {
					this.point.map((value, index) => {
						if (value.length != 0) {
							let marker = new this.AMap.Marker({
								position: value,
							});
							marker.setLabel({
								offset: new AMap.Pixel(5, 5),  //设置文本标注偏移量
								content: ["上午签到/外勤出差第一次打卡", "上午签退/外勤出差第二次打卡", "下午签到/外勤出差第三次打卡", "下午签退/外勤出差第四次打卡"][index], //设置文本标注内容
								direction: 'right' //设置文本标注方位
							})
							this.map.add(marker);
							this.map.setFitView(marker);
							this.marker.push(marker)
						}
					});
				}
			}
		},
		// 删除标记点
		removeMarker() {
			console.log(this.marker.length)
			this.marker.map(item => {
				this.map.remove(item);
			})
			this.marker = new Array()
		}
	},
	props: {
		coordinate: {
			type: Array,
			default: function () {
				return new Array();
			}
		},
		edit: {
			type: Boolean,
			default: false
		},
		markPoint: {
			type: Array,
			default: function () {
				return new Array();
			}
		}
	},
	watch: {
		coordinate(newValue, oldValue) {
			this.clearPath();
			//console.log('coordinate发生变化==>', newValue);
			// 在这里可以执行相应的操作，比如更新子组件的数据或者触发某个方法
			this.path = newValue
			//console.log('coordinate发生变化==>', this.path);
			this.loadPolygon();
			this.polyEditor = new this.AMap.PolyEditor(this.map, this.polygon)
			// 监听编辑结束事件
			this.polyEditorEnd();
		},
		markPoint(newValue, oldValue) {
			this.removeMarker();
			this.point = newValue;
			this.loadMarker();
		}
	}
}
</script>

<style></style>